<template>
    <div>
         <div class="init-file-p">
            <el-button @click="selectTeacherFile" type="primary" icon='el-icon-plus'>批量导入教师</el-button>
            <input ref="teacherFile" @change="teacherFileChange" type="file" multiple style="display:none;">
        </div>
        <div class="init-file-p">
                    
                    <div v-show="teacherFileList.length > 0" class="sel-file-name">
                        <div class="file-tag">选择的文件：</div>
                        <el-tag class="file-tag"
                            :key="tag.id"
                            v-for="tag in teacherFileList"
                            closable
                           
                            @close="removeTeacherFile(tag)">
                             {{tag.name}}
                        </el-tag>
                    </div>
                   
                    <div v-show="teacherWrongList.length == 0 && teacherFileList.length > 0">
                        <el-alert  class="el-alert"
                            :title="teacherList.length + '条数据检测通过，格式正确满足导入要求'"
                            type="success"
                            :closable="false"
                            show-icon>
                        </el-alert>
                        <el-button @click="toLook('teacher')" type="success" icon='el-icon-search'>查看数据</el-button>
                        <el-button @click="submit" type="primary">提交</el-button>
                    </div>
                    <div v-show="teacherWrongList.length > 0">
                        <el-alert  class="el-alert"
                            :title="'错误共计' + teacherWrongList.length + '条，请校正后重新选择文件导或在线修改'"
                            type="error"
                            :closable="false"
                            show-icon>
                        
                        </el-alert>
                        <el-button @click="toModify('teacher')" type="danger" icon='el-icon-edit'>在线修改</el-button>
                    </div>
                </div>

                 <div class="pro-div" v-show="100 > progress && progress > 0">
                    <el-progress :text-inside="true" :stroke-width="26" :percentage="progress" status="success"></el-progress>
                </div>

                  <modify :visible='visible' 
                    @close='visible = false'
                 ></modify>

    </div>
</template>
<script>
import modify from './modify'
import loading from './loading'
import uuid from '@/util/uuid'

import {importDeptData, importTeacherData, importStudentData, setGradeList, setStartYearList, setRelationList,
    setStageList} from '@/util/map' 
export default {
     components: {
        modify, loading
    },
     computed: {
        schoolId () {
            return this.$store.state.common.cookiesObj.schoolId
        },
        teacherFileList () {
            return this.$store.state.initSchool.teacherFileList
        },
        teacherList () {
            return this.$store.state.initSchool.teacherList
        },
       
        teacherWrongList () {
            return this.$store.getters['initSchool/teacherWrongList']
        }
    },
    data () {
        return {
            visible: false,
            loadingVisible: false,
            progress: 0,
            isOver: false,
            errList: []
        }
    },
    methods: {
        selectTeacherFile () {
            this.$refs.teacherFile.click()
        },
       
        async teacherFileChange (e) {
            var fileList = e.target.files
           
            for (let i = 0; i < fileList.length; i++) {
                var file = fileList[i]
                var name = file.name
                var suffix = name.substring(name.lastIndexOf('.')).toUpperCase()
                if (suffix == '.XLSX') {
                    var id = uuid()
                    this.$store.commit('initSchool/pushTeacherFile', {name, id})
                    await this.$store.dispatch('initSchool/readTeacher', {file, fileId: id})
                } else {
                    this.$message.error('“' + name + '” 文件有误，请上传.xlsx文件')
                }
            }
            this.$refs.teacherFile.value = '' 
        },
        
        toModify (type) {
            this.$store.state.initSchool.type = type
            this.$store.state.initSchool.action = 'modify'
            this.visible = true
        },
        toLook (type) {
            this.$store.state.initSchool.type = type
            this.$store.state.initSchool.action = 'look'
            this.visible = true
        },
       
        removeTeacherFile (file) {
            this.$store.dispatch('initSchool/removeTeacherFile', file)
        },
         clearTeacherFile () {
            for (let file of this.teacherFileList) {
                this.removeTeacherFile(file)
            }
        },
       
         async submit () {
              this.loadingVisible = true
           var teacherList = JSON.parse(JSON.stringify(this.teacherList))
            try {
                 while (true) {
                    var temp = teacherList.splice(0, 500)
                    if (temp.length > 0) {
                         await importTeacherData({list: temp, schoolId: this.schoolId})
                          this.progress++
                    } else {
                        break
                    }
                }
                this.isOver = true
                this.progress = 100
                this.clearTeacherFile()

                this.$store.dispatch('initSchool/putSchool', {
                     schoolId: this.schoolId,
                     initState: 2
                 })
                 this.$message.success('导入教职工数据完成')
                 this.$emit('complete')
            } catch (error) {
                var res = error.data
               
                var details = JSON.parse(res.error.details)
                this.$store.dispatch('initSchool/handleErrorTeacher', details)
            }
        }
    },
    mounted () {
        // this.$store.dispatch('initSchool/getSubject')
        // this.$store.dispatch('initSchool/getDept')
        // this.$store.dispatch('initSchool/getGradeList')

        setGradeList({
              schoolId: this.schoolId,
              Sorting: 'orderNum'
         })
    }
}
</script>
<style scoped>
.middle{display: inline-block;vertical-align: middle;}
.init-file-p{padding:0 0 15px 0;}
.sel-file-name{display: inline-block;vertical-align: middle;padding: 0 30px 0 0px;}
.el-alert{margin: 20px 0;}

.file-tag{display: inline-block;vertical-align: middle;margin: 10px;}
</style>
